<template>
	<view class="container">
		<tui-navigation-bar splitLine @init="initNavigation" :scrollTop="scrollTop" backgroundColor="#fff" color="#333">
			<view class="tui-header" :style="{ marginTop: navBarTop + 'px' }">
				<view class="get-back dy-iconfont icon-qiehuanqizuo" @click="goBack"></view>
			</view>
		</tui-navigation-bar>
		<!-- <skeleton v-if="skeletonShow"></skeleton> -->
		<view class="container-from" v-if="!loading">
			<!-- 头像 -->
			<!-- 			<view class="user-avatar" @click="uploadAvatar">
				<uv-image :src="userAvatar" shape="circle" width="160rpx" height="160rpx"></uv-image>
				<view class="camera-icon">
					<uv-icon name="camera" size="24" color="#231815"></uv-icon>
				</view>
			</view> -->
			<button class="user-avatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<uv-image :src="userAvatar" shape="circle" width="160rpx" height="160rpx"></uv-image>
				<view class="camera-icon">
					<uv-icon name="camera" size="24" color="#231815"></uv-icon>
				</view>
			</button>
			<!-- <qf-image-cropper :width="500" :height="500" :radius="30" @crop="handleCrop"></qf-image-cropper> -->
			<uv-upload :previewImage="false" :fileList="fileList1" name="1" multiple :maxCount="1" accept="image" @afterRead="afterRead" @error="uploadError"
				ref="upload">
			</uv-upload>
			<!-- 用户信息表单 -->
			<view class="user-form">
				<template v-for="(item,index) in settingList">
					<view class="form-item" @click="openForm(item)" v-if="item.settleState == 1" :key="item.id">
						<view class="title">{{item.name}}</view>
						<view class="value">
							<!-- 年龄 -->
							<view v-if="item.id == 'birthDate'" class="receiving">
								<view class="receiving-btn" @tap.stop.prevent="onBirthday" :class="item.status ? 'can-receiving' : 'not-receiving'">
									<view v-if="!item.status" class="receiving-status-no">保密</view>
									<view v-else class="receiving-status-can">公开</view>
								</view>
							</view>
							<text class="twolist-hidden" v-if="item.id != 'receiving'">{{setNumber(item.value,item.unit)}}
								<text v-if="item.unit && item.value">{{item.unit}}</text>
							</text>
							<text v-if="item.arrow" class="arrow dy-iconfont icon-qiehuanqiyou"></text>
						</view>
					</view>
				</template>
				<view class="form-item form-item-location" v-if="settleState == 1 && false">
					<view class="title">常驻地址</view>
					<view class="content">常驻地址不会公开展示，仅计算服务距离</view>
					<view class="location" @tap="openPicker">
						<view class="value towList-hidden" :class="{'resident': resident}">
							{{resident ? resident : '请选择地址'}}
						</view>
						<view class="dy-iconfont icon-dingwei"></view>
					</view>
					<uv-textarea height="140rpx" v-model="locationValue" :maxlength="500" placeholder="请填写详细地址，街道、楼牌号等"
						placeholder-style="font-size: 28rpx; font-weight: 400; color: #999B9B;"
						customStyle="border-radius: 20rpx; border: 2rpx dashed #C4CFCA;box-sizing: border-box;padding: 26rpx 36rpx;font-size: 28rpx;"></uv-textarea>
				</view>
				<view class="production-list" v-if="settleState == 1">
					<view class="title">个人照片/视频</view>
					<view class="incont">个人作品/照片/视频将作为公开内容展示给其他用户，您可以上传与个人技能相关的图片/视频或本人照片/视频。</view>
					<uv-upload :fileList="fileList2" name="2" multiple :maxCount="9" :accept="accept" :swiper="true" @afterRead="afterReadm" @delete="deletePic"
						@error="uploadError" ref="uploadm" @onPreviewSwiper="onPreviewSwiper">
						<view class="add-image" @tap="selectMedia" v-if="fileList2.length < 9">
							<uv-icon name="plus" color="#D8D8D8" size="40"></uv-icon>
						</view>
					</uv-upload>
				</view>
			</view>
		</view>
		<uv-popup ref="popup" mode="bottom" :safeAreaInsetBottom="false" round="20">
			<view class="set-popup">
				<view class="header">
					<view class="title">{{pageTitle}}</view>
					<view class="close" @tap="close"><text class="dy-iconfont icon-a-bianzu69"></text></view>
				</view>
				<view class="set-content">
					<view class="title" v-if="pageSetTitle">{{pageSetTitle}}</view>
					<!-- 昵称 -->
					<view class="nickName-pop" v-if="popupID == 'nickName'">
						<view class="title">七天内可修改一次名字</view>
						<input v-model="setValue" class="uni-input" placeholder="请输入您的昵称"
							placeholder-style="font-size: 28rpx; font-weight: 400; color: #999B9B;" maxlength="24" />
						<view class="hite">请设置2-24个字符，可由中英文、数字、"_"、"-"组成</view>
					</view>

					<!-- 微信号 -->
					<view class="nickName-pop" v-if="popupID == 'wechatNumber'">
						<input v-model="setValue" class="uni-input" placeholder="请输入您的微信号"
							placeholder-style="font-size: 28rpx; font-weight: 400; color: #999B9B;" maxlength="24" />
					</view>
					<!-- 简介 -->
					<uv-textarea v-else-if="popupID == 'pengIntro'" height="700rpx" v-model="setValue" :maxlength="500" placeholder="请输入简介"
						placeholder-style="font-size: 28rpx; font-weight: 400; color: #999B9B;"></uv-textarea>
					<!-- 性别 -->
					<view class="gender-box" v-else-if="popupID == 'realSex'">
						<view class="radio-item" :class="'radio-item-' + index" v-for="(item,index) in genderList.list" :key="item.id"
							@tap.stop.prevent="onSubmit" :data-key="item.name">
							<text>{{item.name}}</text><text v-if="index == genderList.current" class="radio"></text>
						</view>
					</view>
					<!--身高 -->
					<select-ruler v-else-if="popupID == 'userHeight'" ref="ruler" :min="0" :max="300" :disable="false" :multiple="1"
						:defaultValue="defaultValue" :unit="'cm'" @change="statureChange"></select-ruler>
					<!--体重 -->
					<select-ruler v-else-if="popupID == 'userWeight'" ref="ruler" :min="0" :max="300" :disable="false" :multiple="1"
						:defaultValue="weightDefaultValue" :unit="'kg'" @change="statureChange"></select-ruler>
					<button v-if="popupID != 'realSex'" class="btn-primary btn-submit" @tap.stop.prevent="onSubmit">提交</button>
				</view>
			</view>
		</uv-popup>
		<uv-popup ref="popupSwiper" mode="center" bgColor="none" overlayOpacity="1">
			<view class="swiper-box-pop">
				<uv-swiper class="banner-d" :pop="true" :current="s_current" bgColor="none" imgMode="widthFix" height="100vh" :list="fileList2"
					keyName="fileUrl" :autoplay="false" @closePop="closePop" @click="clickHandler" @videoPlayOverlay="videoPlayOverlay"></uv-swiper>
			</view>
		</uv-popup>
		<uv-popup :safeAreaInsetBottom="false" ref="pickerPopup" mode="bottom" round="20">
			<view class="resident-pop">
				<view class="header">
					<view class="title">选择开户银行省市</view>
					<view class="close" @tap="closePicker"><text class="dy-iconfont icon-a-bianzu69"></text></view>
				</view>
				<uv-picker ref="picker" :roundArray="2" :columns="addressList" keyName="name" @change="change">
				</uv-picker>
				<view class="btn-box">
					<view class="look" @tap="closePicker">取消</view>
					<button class="btn-primary btn-submit" @tap.stop.prevent="onSubmitPicker">确认</button>
				</view>
			</view>
		</uv-popup>
		<uv-action-sheet ref="actionSheet" round="20" cancelText="关闭" :actions="list" closeOnClickOverlay @select="selectMediaItem">
		</uv-action-sheet>
		<survey-pop></survey-pop>
		<uv-toast ref="toast"></uv-toast>
	</view>
</template>

<script>
	import mp from "@/mixins/mp.js";
	// import QfImageCropper from '@/components/qf-image-cropper/qf-image-cropper.vue';
	import {
		timeFormat
	} from '@/uni_modules/uv-ui-tools/libs/function/index.js';
	const app = getApp();

	export default {
		mixins: [mp],
		components: {
			// QfImageCropper
		},
		data() {
			return {
				navBarOpacity: 0, //标题图标距离顶部距离
				scrollTop: 0.5, //页面滚动高度
				navBarTop: 0, // 导航栏content顶部m-top
				skeletonShow: true,
				userInfo: null,
				pageTitle: '',
				pageSetTitle: '',
				fileList1: [],
				fileList2: [],
				accept: 'image',
				list: [{
					name: '图片',
					lable: 'image'
				}, {
					name: '视频',
					lable: 'video'
				}],
				s_current: 0,
				//用户头像
				userAvatar: '',
				locationValue: '',
				popupID: '',
				setValue: null,
				// 身高
				defaultValue: 0,
				// 体重
				weightDefaultValue: 0,
				// 位置
				addressDefaultValue: [],
				genderList: {
					list: [{
							name: '男',
							id: 'man'
						},
						{
							name: '女',
							id: 'woman'
						}
					],
					current: 3
				},
				pictureList: [],
				loading: true,
				settleState: 0,
				// 菜单列表
				settingList: [{
					id: "id",
					name: "id",
					value: '',
					arrow: false,
					jurisdiction: true,
					setting: false,
					settleState: 1
				}, {
					id: "nickName",
					name: "昵称",
					value: '',
					arrow: true,
					jurisdiction: true,
					settleState: 1
				}, {
					id: "realName",
					name: "姓名",
					value: '',
					arrow: false,
					jurisdiction: true,
					settleState: 0
				}, {
					id: "pengIntro",
					name: "简介",
					value: '',
					arrow: true,
					jurisdiction: true,
					settleState: 0
				}, {
					id: "birthDate",
					name: "年龄",
					value: '',
					arrow: false,
					jurisdiction: true,
					status: true,
					settleState: 0
				}, {
					id: "realSex",
					name: "性别",
					value: '女',
					arrow: false,
					jurisdiction: true,
					settleState: 0
				}, {
					id: "userHeight",
					name: "身高",
					value: '',
					arrow: true,
					unit: 'cm',
					jurisdiction: true,
					settleState: 0
				}, {
					id: "userWeight",
					name: "体重",
					value: '',
					unit: 'kg',
					arrow: true,
					jurisdiction: true,
					settleState: 0
				}, {
					id: "pengMobile",
					name: "手机号",
					value: '',
					arrow: false,
					jurisdiction: true,
					settleState: 0
				}, {
					id: "wechatNumber",
					name: "微信号",
					value: '',
					arrow: true,
					jurisdiction: true,
					settleState: 0
				}],
				provinces: [], //省
				citys: [], //市
				areas: [], //区
				pickerValue: [0, 0, 0],
				pickeDefaultValue: [3442, 1, 2],
				resident: null,
				latitude: "",
				longitude: "",
			};
		},
		/**
		 * 计算属性
		 */
		computed: {
			getCountPicture() {
				return this.fileList2.length;
			},
			addressList() {
				return [this.provinces, this.citys, this.areas];
			}
		},
		onLoad(options) {
			this.userInfo = app.globalData.UserInfo
			this.getUserDetails()
		},
		onShow: function() {},
		/**
		 * 下拉
		 */
		onPullDownRefresh: function() {},
		/**
		 * 触底
		 */
		onReachBottom() {},
		/**
		 * 滚动
		 */
		onPageScroll(e) {},
		methods: {
			handleCrop(e) {
				uni.previewImage({
					urls: [e.tempFilePath],
					current: 0
				});
			},
			//获取用户详情
			getUserDetails() {
				this.loading = true
				return new Promise((resolve, reject) => {
					app._get(
						"/client/my/own-detail", null,
						(result) => {
							let res = result.data
							this.userAvatar = res.avatar
							this.settleState = res.settleState
							if (res.settleState == 1) {
								res.pengIntroList.forEach((item, index) => {
									this.$set(this.fileList2, index, Object.assign(item, {
										url: item.fileType == 1 ? item.fileUrl : item.coverPictureUrl,
										type: item.fileType == 1 ? 'image' : 'video',
										fileUrl: item.fileUrl,
										status: item.auditState == 1 ? 'success' : item.auditState == 2 ? 'audit' : 'failed',
										message: item.auditState == 1 ? '' : item.auditState == 2 ? '正在审核' : '审核未通过'
									}))
								})
							}
							this.settingList.forEach((item, index) => {
								if (index > 1) {
									this.$set(this.settingList[index], 'settleState', res.settleState)
								}
								if (res[item.id]) {
									if (item.id == 'realSex') {
										this.$set(this.settingList[index], 'value', res[item.id] == 'M' ? '男' : '女')
									} else if (item.id == 'birthDate') {
										this.$set(this.settingList[index], 'value', this.getAge(timeFormat(res[item.id], 'yyyy-mm-dd')))
										this.$set(this.settingList[index], 'status', res.birthViewState == 1)
									} else {
										this.$set(this.settingList[index], 'value', res[item.id])
									}
								}
							})
							this.loading = false
						}, null, () => {
							this.loading = false
							resolve();
						}
					);
				});
			},
			//文本内容审核  1 资料；2 评论；3 论坛；
			checkMessage(messageContent, scene) {
				return new Promise((resolve, reject) => {
					app._post_form(
						"/client/input-check/check-message", {
							messageContent: messageContent,
							scene: scene
						},
						(result) => {
							let res = result.data
							resolve(res);
						}, null, () => {
							resolve(false);
						}
					);
				});
			},
			async getUserName(messageContent) {
				let that = this
				that.$refs.toast.show({
					type: 'loading',
				})
				const check_message = await that.checkMessage(messageContent, 1)
				if (!check_message) {
					that.$refs.toast.hide()
					that.$refs.toast.show({
						type: 'default',
						message: "请输入合法昵称"
					})
					setTimeout(() => {
						that.$refs.toast.hide()
					}, 1000)
					return 'check_message'
				}
				if (!that.verifyInput(messageContent)) {
					that.$refs.toast.hide()
					that.$refs.toast.show({
						type: 'default',
						message: "请输入正确格式的昵称"
					})
					setTimeout(() => {
						that.$refs.toast.hide()
					}, 1000)
					return 'check_message'
				}

				return new Promise((resolve, reject) => {
					app._get(
						"/client/my/check-update-record?updateType=0", null,
						(result) => {
							let res = result.data
							that.$refs.toast.hide()
							resolve(res);
						}, null, () => {
							that.$refs.toast.hide()
							resolve(false);
						}
					);
				});
			},
			setNumber(e, unit) {
				return unit ? parseInt(e) : e
			},
			openForm(item) {
				this.popupID = item.id

				switch (item.id) {
					case 'nickName':
						this.pageTitle = '编辑昵称';
						this.setValue = this.settingList[1].value
						break;
					case 'pengIntro':
						this.pageTitle = '编辑简介';
						this.setValue = this.settingList[3].value
						break;
					case 'birthDate':
						this.$refs.datetimePicker.open();
						return
					case 'realSex':
						this.genderList.current = item.value == '男' ? 0 : item.value == '女' ? 1 : 3
						this.pageTitle = '编辑性别';
						this.pageSetTitle = '编辑你的性别';
						break;
					case 'userHeight':
						this.pageTitle = '编辑身高';
						this.defaultValue = item.value ? parseInt(item.value) : 0
						break;
					case 'userWeight':
						this.pageTitle = '编辑体重';
						this.weightDefaultValue = item.value ? parseInt(item.value) : 0
						break;
					case 'address':
						this.pageTitle = '服务地址';
						this.pageSetTitle = '选择服务地址';
						// this.addressDefaultValue.push()
						break;
					case 'wechatNumber':
						this.pageTitle = '编辑微信号';
						this.setValue = this.settingList[9].value
						break;
				}
				if (item.arrow) {
					this.$refs.popup.open();
				}
			},
			plusLocation() {
				this.$refs.picker.open();
			},
			selectLocation(e) {
				let location = e.value[0].name + e.value[1].name + e.value[2].name
				if (!this.addressDefaultValue.includes(location)) {
					this.addressDefaultValue.push(location)
					this.$refs.picker.close();
				}
			},
			dataChange(e) {
				this.setValue = e.value
			},
			verifyInput(inputValue) {
				let nameReg = /^[0-9A-Za-z\u4e00-\u9fa5_\-]+$/; //中英文数字下划线、减号
				let zhuanyiLength = 0
				if (inputValue) {
					let zhuanyi = inputValue.replace(/([\u4e00-\u9fa5]+?)/g, 'aa'); //中文转成英文两个字符
					zhuanyiLength = zhuanyi.length //判断字符长度
				}
				if (nameReg.test(inputValue) && zhuanyiLength > 1 && zhuanyiLength < 25) {
					return true
				} else {
					return false
				}
				// 2-24个字符，可由中英文、数字、“_”、“-”
				// var reg = /^[A-Za-z0-9-_\u4e00-\u9fa5]{2,24}$/;
				// if (!reg.test(inputValue)) {
				// 	return false
				// } else {
				// 	return true
				// }
			},
			strCode(str) { //获取字符串的字节数
				var count = 0; //初始化字节数递加变量并获取字符串参数的字符个数
				if (str) { //如果存在字符串，则执行
					var len = str.length;
					for (var i = 0; i < len; i++) { //遍历字符串，枚举每个字符
						if (str.charCodeAt(i) > 255) { //字符编码大于255，说明是双字节字符(即是中文)
							count += 2; //则累加2个
						} else {
							count++; //否则递加一次
						}
					}
					console.log(count);
					return count; //返回字节数
				} else {
					console.log(0);
					return 0; //如果参数为空，则返回0个
				}
			},
			async onSubmit(e) {
				let that = this
				if (e.value) {
					that.setValue = e.value
				}
				let nick_name = true
				let verifyInput = true
				if (that.popupID == 'nickName') {
					nick_name = await that.checkMessage(that.setValue, 1)
					verifyInput = that.verifyInput(that.setValue)
				}

				if (!nick_name) {
					that.$refs.toast.show({
						type: 'default',
						message: "请输入合法昵称"
					})
					setTimeout(() => {
						that.$refs.toast.hide()
					}, 1000)
					return
				}
				if (!verifyInput) {
					that.$refs.toast.show({
						type: 'default',
						message: "请输入正确格式的昵称"
					})
					setTimeout(() => {
						that.$refs.toast.hide()
					}, 1000)
					return 'check_message'
				}

				if (that.popupID == 'nickName') {
					that.getUserName(that.setValue).then((res) => {
						if (res == 'check_message') {
							return
						}
						if (res) {
							that.updateUser(that.setValue)
						} else {
							that.$refs.toast.show({
								type: 'default',
								message: "七天内只可修改一次昵称"
							})
							setTimeout(() => {
								that.$refs.toast.hide()
							}, 1000)
						}
					})
				}
				if (that.popupID == 'userHeight' || that.popupID == 'userWeight') {
					that.updateUser(that.setValue)
				}
				if (that.popupID == 'pengIntro') {
					const check_message = await that.checkMessage(that.setValue, 1)
					if (!check_message) {
						that.$refs.toast.show({
							type: 'default',
							message: "请输入合法文字"
						})
						setTimeout(() => {
							that.$refs.toast.hide()
						}, 1000)
						return 'check_message'
					}
					that.updateUser(that.setValue)
				}
				if (that.popupID == 'wechatNumber') {
					if (!that.setValue) {
						that.$refs.toast.show({
							type: 'default',
							message: "请输入微信号"
						})
						setTimeout(() => {
							that.$refs.toast.hide()
						}, 1000)
						return false
					}
					that.updateUser(that.setValue)
				}

				if (that.popupID == 'realSex') {
					that.setValue = e.currentTarget.dataset.key
					that.genderList.current = that.setValue == '男' ? 0 : that.setValue == '女' ? 1 : 3
				}
				if (that.popupID == 'address') {
					var address = '';
					for (var i = 0; i < that.addressDefaultValue.length; i++) {
						address += that.addressDefaultValue[i] + ' ';
					}
					that.setValue = address
				}

				if (e.currentTarget && e.currentTarget.dataset && e.currentTarget.dataset.item && e.currentTarget
					.dataset
					.item.id == 'receiving') {
					that.popupID = e.currentTarget.dataset.item.id
					that.setValue = e.currentTarget.dataset.item.value == 0 ? 1 : 0
				}

				if (that.setValue === "") {
					return
				}

				that.settingList.forEach((item, index) => {
					if (item.id == that.popupID) {
						that.$set(item, 'value', that.setValue)
					}
				})
			},
			onBirthday() {
				// birthViewState
				this.popupID = 'birthDate'
				this.setValue = !this.settingList[4].status
				this.updateUser(this.settingList[4].status ? 0 : 1)
			},
			updateUser(data, url) {
				let that = this
				that.$refs.toast.show({
					type: 'loading',
				})
				return new Promise((resolve, reject) => {
					let parame = {
						"avatar": null,
						"birthViewState": null,
						"nickName": null,
						"pengIntro": null,
						"shelfState": null,
						"userHeight": null,
						"userWeight": null,
						"wechatNumber": null
					}
					if (that.popupID == 'userAvatar') {
						parame.avatar = data
					} else if (that.popupID == 'nickName') {
						parame.nickName = data
					} else if (that.popupID == 'pengIntro') {
						parame.pengIntro = data
					} else if (that.popupID == 'userHeight') {
						parame.userHeight = data
					} else if (that.popupID == 'userWeight') {
						parame.userWeight = data
					} else if (that.popupID == 'birthDate') {
						parame.birthViewState = data
					} else if (that.popupID == 'wechatNumber') {
						parame.wechatNumber = data
					}
					app._post_form(
						"/client/my/update-user", parame,
						(result) => {
							that.$refs.toast.hide()
							let user_info = uni.getStorageSync('user_info');
							if (that.popupID == 'userAvatar') {
								that.userAvatar = url
								app.globalData.UserInfo.avatarUrl = url
								user_info.avatarUrl = url
								uni.setStorageSync('user_info', user_info);
							} else if (that.popupID == 'nickName') {
								app.globalData.UserInfo.authInfo.name = data
								user_info.authInfo.name = data
								uni.setStorageSync('user_info', user_info);
							}

							that.settingList.forEach((item, index) => {
								if (item.id == that.popupID && that.popupID != 'birthDate') {
									that.$set(item, 'value', that.setValue)
								} else if (that.popupID == 'birthDate') {
									that.$set(item, 'status', that.setValue)
								}
							})
							that.close()
						}, null, () => {
							that.$refs.toast.hide()
							resolve();
						}
					);
				});
			},
			close() {
				this.$refs.popup.close();
				this.pageTitle = '';
				this.popupID = '';
				this.pageSetTitle = '';
				this.setValue = null;
			},
			uploadAvatar() {
				this.popupID = 'userAvatar'
				this.$refs.upload.chooseFile();
			},
			async onChooseAvatar(e) {
				const {
					avatarUrl
				} = e.detail;
				this.popupID = 'userAvatar'
				this.uploadFilePromise(avatarUrl)
				const result = await this.uploadFilePromise(avatarUrl)
				if (!result) {
					return
				}
				console.log(result);
				this.updateUser(result.path, result.url)
			},
			selectMedia() {
				this.$refs.actionSheet.open();
			},
			selectMediaItem(e) {
				this.accept = e.lable
				this.$nextTick(() => {
					this.$refs.uploadm.chooseFile();
				})
			},
			uploadError(e) {
				console.log(e);
			},
			onPreviewSwiper(item) {
				this.s_current = item.index
				this.$refs.popupSwiper.open();
			},
			closePop() {
				this.$refs.popupSwiper.close();
			},
			clickHandler(swiper) {
				if (swiper.item.fileType == 1) {
					this.closePop()
				}
			},
			videoPlayOverlay(swiper) {
				this.closePop()
			},
			// 删除图片
			deletePic(event) {
				let that = this
				that.$refs.toast.show({
					type: 'loading',
				})
				let update = {
					delList: [event.file.id],
					fileList: null,
				}
				that.updateIntro(update).then((res) => {
					that.$refs.toast.hide()
					that[`fileList${event.name}`].splice(event.index, 1)
				})
			},
			// 新增图片
			async afterRead(event) {
				let that = this
				that.$refs.toast.show({
					type: 'loading',
				})
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = that[`fileList${event.name}`].length
				lists.map((item) => {
					that[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				const result = await that.uploadFilePromise(lists[0].url)
				if (!result) {
					return
				}
				that.updateUser(result.path, result.url)
				that.$refs.toast.hide()
			},
			async afterReadm(event) {
				let that = this
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = that[`fileList${event.name}`].length
				lists.map((item) => {
					that[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				// http://localhost:8080/h5/page_account/autonym/basic
				for (let i = 0; i < lists.length; i++) {
					const result = await that.uploadFilePromise(lists[i].url, lists[i].type, 1)
					if (!result) {
						that[`fileList${event.name}`].splice(fileListLen, 1, Object.assign({
							status: 'failed',
							message: '上传失败',
							...lists[i],
						}))
						continue;
					}
					let item = that[`fileList${event.name}`][fileListLen]
					let update = {
						delList: null,
						fileList: [{
							coverPictureUrl: result.coverPictureUrl,
							fileUrl: result.path
						}],
					}
					that.updateIntro(update).then((res) => {
						that[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
							status: 'audit',
							message: '正在审核',
							url: result.coverPictureUrl ? result.coverPictureUrl : result.url,
							path: result.path,
							type: result.fileType,
							fileUrl: result.url,
						}))
						fileListLen++
					}).catch(() => {
						that[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
							status: 'failed',
							message: '上传失败',
						}))
					})
				}
				console.log(that[`fileList${event.name}`]);
			},
			uploadFilePromise(url, type, loading) {
				let that = this
				if (loading != 1) {
					that.$refs.toast.show({
						type: 'loading',
					})
				}
				return new Promise((resolve, reject) => {
					let header = {}
					if (app.globalData.token) {
						header = {
							token: 'Bearer ' + app.globalData.token,
						}
					}
					let a = uni.uploadFile({
						url: app.globalData.api_root + '/client/file/anyone/upload',
						filePath: url,
						name: 'file',
						formData: {
							storageType: 'TENCENT_COS',
							bucket: 'pengtou-1322587508',
							bizType: type == 'video' ? 'video-frame' : 'send'
						},
						header: header || {},
						success: (res) => {
							setTimeout(() => {
								that.$refs.toast.hide()
								let result = typeof res.data === "object" ? res.data : JSON
									.parse(res.data);
								if (0 == result.code || 200 == result.code) {
									let time = result.data.coverPictureUrl ? 2000 : 200
									setTimeout(() => {
										resolve(result.data)
									}, time)
								} else {
									setTimeout(() => {
										resolve(false);
									}, 200)
								}
							}, 1000)
						},
						fail: (err) => {
							console.log('err', err);
							setTimeout(() => {
								resolve(false);
								that.$refs.toast.hide()
							}, 1000)
						},
					});
				})
			},
			updateIntro(update) {
				return new Promise((resolve, reject) => {
					app._post_form(
						"/client/my/update-intro", update,
						(result) => {
							resolve(result);
						}, null, null,
						() => {
							reject();
						}
					);
				});
			},
			getAge(date) {
				var age = "";
				var str = date.replace(/年|月/g, "-").replace(/日/g, "");
				var r = str.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
				if (r == null) return false;
				var d = new Date(r[1], r[3] - 1, r[4]);
				if (
					d.getFullYear() == r[1] &&
					d.getMonth() + 1 == r[3] &&
					d.getDate() == r[4]
				) {
					var Y = new Date().getFullYear();
					age = Y - r[1];
					return age;
				}
			},
			openPicker() {
				wx.chooseLocation({
					success: (res) => {
						// console.log(res);
						this.resident = res.address + " " + res.name;
						this.latitude = res.latitude;
						this.longitude = res.longitude;
					},
					fail: () => {},
					complete: function() {}
				})
			},
			handlePickValueDefault() {
				// 设置省
				this.pickerValue[0] = this.provinces.findIndex(item => Number(item.id) === this.pickeDefaultValue[0]);
				// 设置市
				this.citys = this.provinces[this.pickerValue[0]]?.children || [];
				this.pickerValue[1] = this.citys.findIndex(item => Number(item.id) === this.pickeDefaultValue[1]);
				// 设置区
				this.areas = this.citys[this.pickerValue[1]]?.children || [];
				this.pickerValue[2] = this.areas.findIndex(item => Number(item.id) === this.pickeDefaultValue[2]);
				// 重置下位置
				this.$refs.picker.setIndexs([this.pickerValue[0], this.pickerValue[1], this.pickerValue[2]], true);
			},
			change(e) {
				const {
					columnIndex,
					index,
					indexs
				} = e
				// 改变了省
				if (columnIndex === 0) {
					this.citys = this.provinces[index]?.children || []
					this.areas = this.citys[0]?.children || []
					this.$refs.picker.setIndexs([index, 0, 0], true)
				} else if (columnIndex === 1) {
					this.areas = this.citys[index]?.children || []
					this.$refs.picker.setIndexs(indexs, true)
				}
			},
			closePicker() {
				this.$refs.pickerPopup.close();
			},
			onSubmitPicker() {
				let resident = this.$refs.picker.confirm();
				this.resident = resident.value[0].name + '·' + resident.value[1].name + '·' + resident.value[2].name
				this.closePicker()
			},
			statureChange(e) {
				this.setValue = e
			},
			initNavigation(e) {
				this.navBarOpacity = e.opacity;
				this.navBarTop = e.top;
			},
			// 返回上一页
			goBack: function() {
				app.beNavigateBack();
			},
		},
	};
</script>
<style lang="scss" scoped>
	.container {
		background: #FFFFFF;

		.tui-header {
			width: 100%;
			position: fixed;
			top: 0;
			padding: 0 42rpx;
			display: flex;
			align-items: center;
			height: 32px;
			transform: translateZ(0);
			z-index: 99999;
			box-sizing: border-box;

			.get-back {
				flex-shrink: 0;
				width: 36rpx;
				height: 36rpx;
				color: #000;
				font-size: 36rpx;
				padding: 2rpx 40rpx 2rpx 2rpx;
			}
		}

		.container-from {
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			box-sizing: border-box;
			padding: 212rpx 24rpx 38rpx;
		}

		.user-avatar {
			position: relative;
			margin-bottom: 17rpx;
			background: none;
			padding: 0;

			.camera-icon {
				position: absolute;
				width: 62rpx;
				height: 62rpx;
				background: #F6F8F7;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				bottom: -16rpx;
				right: -10rpx;
			}
		}

		.user-form {
			width: 100%;

			.form-item {
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 36rpx 0;
				border-bottom: 2rpx solid #E3E9E5;

				.title {
					font-size: 28rpx;
					font-weight: 400;
					color: #282D2D;
					line-height: 37rpx;
					flex-shrink: 0;
					margin-right: 80rpx;
				}

				.value {
					font-size: 28rpx;
					font-weight: 900;
					color: #282D2D;
					line-height: 37rpx;
					display: flex;
					align-items: center;

					.arrow {
						font-size: 24rpx;
						line-height: 24rpx;
						color: #BBBCBB;
						margin-left: 20rpx;
					}
				}

				.receiving {
					display: flex;
					align-items: center;
					font-size: 20rpx;
					font-weight: 400;
					color: #282D2D;
					line-height: 28rpx;
				}

				.receiving-btn {
					width: 112rpx;
					height: 48rpx;
					border-radius: 40rpx;
					background: #A7F517;
					box-sizing: border-box;
					padding: 4rpx;
					position: relative;
					margin-right: 9rpx;

					.receiving-status-can {
						position: absolute;
						right: 12rpx;
						top: 50%;
						transform: translateY(-50%);
					}

					.receiving-status-no {
						position: absolute;
						left: 12rpx;
						top: 50%;
						transform: translateY(-50%);
					}

					&::before {
						content: "";
						display: block;
						width: 52rpx;
						height: 40rpx;
						border-radius: 24rpx;
						background: #FFFFFF;
						position: absolute;

					}

					&.can-receiving {
						&::before {
							left: 4rpx;
						}
					}

					&.not-receiving {
						background: #E3E9E5;

						&::before {
							right: 4rpx;
						}
					}
				}

				&.form-item-location {
					flex-direction: column;
					align-items: normal;
					width: 100%;

					.content {
						font-size: 22rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #999B9B;
						line-height: 30rpx;
						margin: 12rpx 0 24rpx 0;
					}

					.location {
						border: 2rpx dashed #C4CFCA;
						box-sizing: border-box;
						padding: 26rpx 36rpx;
						border-radius: 20rpx;
						margin-bottom: 16rpx;
						font-size: 26rpx;
						font-weight: 400;
						color: #999B9B;
						line-height: 37rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.value {
							font-size: 26rpx;
							font-weight: 400;
							color: #999B9B;
							line-height: 37rpx;

							&.resident {
								color: #282D2D;
							}
						}
					}
				}
			}

			.production-list {
				width: 100%;

				.title {
					font-size: 30rpx;
					font-weight: 400;
					color: #282D2D;
					line-height: 37rpx;
					margin: 35rpx 0 24rpx 0;
				}

				.incont {
					font-size: 24rpx;
					font-weight: 400;
					color: #999B9B;
					line-height: 30rpx;
					margin-bottom: 24rpx;
				}

				/deep/.scroll-view_H {
					height: 100%;
					display: flex;

					.uni-scroll-view-content {
						display: flex;
					}

					.picture-item {
						position: relative;
						display: flex;
						align-items: center;
						justify-content: center;

						.del-btn {
							position: absolute;
							display: flex;
							top: 10rpx;
							right: 10rpx;
							z-index: 2;
						}
					}

					.picture-item-video {
						margin: 0 auto;
					}

					.picture-image {
						flex-shrink: 0;
						width: 190rpx;
						height: 190rpx;
						margin-right: 20rpx;
						border-radius: 10px;
					}
				}

				.add-image {
					flex-shrink: 0;
					width: 190rpx;
					height: 190rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					border: 2rpx dashed #C4CFCA;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}

		.set-popup {
			background: #F6F8F7;
			box-sizing: border-box;
			padding: 48rpx 24rpx 0;
			position: relative;

			.header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding-bottom: 36rpx;

				.title {
					font-size: 32rpx;
					font-weight: 900;
					color: #282D2D;
					line-height: 45rpx;
				}

				.close {
					font-size: 22rpx
				}
			}

			.set-content {
				min-height: 1000rpx;

				.title {
					font-size: 28rpx;
					font-weight: 400;
					color: #282D2D;
					line-height: 37rpx;
					margin-bottom: 34rpx;
				}

				.nickName-pop {
					.title {
						font-size: 26rpx;
						font-weight: 400;
						color: #282D2D;
						line-height: 37rpx;
						margin-bottom: 24rpx;
					}

					.hite {
						font-size: 24rpx;
						font-weight: 400;
						color: #999B9B;
						line-height: 33rpx;
						margin-top: 24rpx;
					}
				}

				.gender-box {
					box-sizing: border-box;
					padding: 38rpx;
					font-size: 28rpx;
					font-weight: 900;
					color: #282D2D;
					line-height: 37rpx;
					background: #FFF;
					border-radius: 10rpx;

					.radio-item {
						display: flex;
						justify-content: space-between;
						align-items: center;
					}

					.radio-item-0 {
						margin-bottom: 60rpx;
					}

					.radio {
						&::before {
							font-family: "dy-iconfont";
							content: "\e615";
							font-size: 28rpx;
						}
					}
				}

				.uni-input {
					width: 100%;
					height: 80rpx;
					flex-shrink: 0;
					background: #FFF;
					box-sizing: border-box;
					padding-left: 28rpx;
					border-radius: 10rpx;
					line-height: 80rpx;
					font-size: 28rpx;
				}

				.location {
					display: flex;
					flex-wrap: wrap;
					align-items: center;

					.location-item {
						min-height: 80rpx;
						background: #FFFFFF;
						border-radius: 20rpx;
						border: 2rpx solid #7B867F;
						box-sizing: border-box;
						padding: 17rpx 50rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #282D2D;
						margin-right: 16rpx;
						margin-bottom: 24rpx;
					}

					.plus {
						display: flex;
						align-items: center;
						justify-content: center;
						border: 2rpx dashed #7B867F;
					}
				}

				.btn-submit {
					position: absolute;
					bottom: 64rpx;
					left: 50%;
					transform: translateX(-50%);
					width: calc(100% - 77rpx + 24rpx);
					z-index: 100;

				}
			}
		}

		.swiper-box-pop {
			width: 100vw;
		}

		.resident-pop {
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 43rpx 31rpx 66rpx;
			position: relative;

			.header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				margin-bottom: 33rpx;

				.title {
					font-size: 32rpx;
					font-weight: 900;
					color: #282D2D;
					line-height: 45rpx;
				}

				.close {
					font-size: 22rpx
				}
			}

			.delete-hint {
				font-size: 32rpx;
				font-weight: 900;
				color: #282D2D;
				line-height: 45rpx;
				margin: 27rpx 0 49rpx 0;
				text-align: center;
			}

			.btn-box {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.look {
					width: calc((100% - 24rpx)/2);
					background: #FFFFFF;
					border-radius: 20rpx;
					border: 2rpx solid #7B867F;
					font-size: 32rpx;
					font-weight: 900;
					color: #999B9B;
					height: 84rpx;
					line-height: 84rpx;
					text-align: center;
				}

				.btn-submit {
					width: calc((100% - 24rpx)/2);
					// height: 102rpx;
					// line-height: 102rpx;
				}
			}
		}
	}
</style>